<template>
	<view class="home" :style="bgStyle">
		<custom-navbar title="产品详情" :show-back="true" @back="handleBack" />

		<view class="content p30" :style="{ paddingTop: navBarHeight + 'px' }">
			<view class="list mt30">
				<view class="item p30 ">
					<view class="f306c3 mb18">{{Details.finance_title}}</view>
					<view class="fc mb35">
						<view v-for="(items,index) in Details.product_tags_text" key="index"
							class="p0020 fcc tips mr10">
							{{items}}
						</view>
					</view>
					<view class="f22c9">{{Details.institution_name}}</view>
					<up-line margin='12rpx 0 30rpx 0'></up-line>
					<view class="fcsb">
						<view class="f22c9">起止时间:{{Details.start_time}}至{{Details.end_time}}</view>
						<view @click.stop="toggleCollection(Details)">
							<image v-if="Details.is_collection == 0" class="wh36" src="/static/images/talents/未收藏.svg">
							</image>
							<image v-else class="wh36" src="/static/images/talents/已收藏.svg"></image>
						</view>
					</view>
				</view>

			</view>

			<view class="p4030 bgffffff mt30 br20">
				<view>
					<view class="mb16 f30bc0">产品介绍</view>
					<mp-html :content="Details.product_details" />
				</view>
			</view>

		</view>
	</view>

</template>

<script setup>
	import CustomNavbar from '@/components/custom-navbar.vue'
	import supplyModal from '@/components/supplyModal.vue';
	import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
	import {
		ref,
		onMounted,
		computed
	} from 'vue';
	import {
		lists,
		details
	} from '@/api/finance'
	import {
		saveCollection
	} from '@/api/login'
	// 2. 获取系统信息（同步操作放在setup最前面）
	const systemInfo = uni.getSystemInfoSync()

	// 3. 定义响应式数据
	const searchKey = ref('')

	// 4. 计算属性
	const navBarHeight = computed(() => systemInfo.statusBarHeight + 44)
	// 供需大厅
	const bgStyle = ref({})


	// 初始化
	onMounted(() => {
		bgStyle.value = {
			backgroundImage: `url(https://gx.jifgou.com/image/homebg.png)`,
			backgroundSize: '100% auto',
			backgroundRepeat: 'no-repeat',
			minHeight: '100vh'
		}
		setTimeout(() => {
			const pages = getCurrentPages()
			const currentPage = pages[pages.length - 1]
			const options = currentPage.options
			finance_id.value = options.finance_id

			getinstitutionDetails()
		}, 100)
	})
	const finance_id = ref(null)
	const Details = ref({})
	const getinstitutionDetails = async () => {

		const parmas = {
			finance_id: finance_id.value
		}
		try {
			const Res = await details(parmas)
			if (Res.code === 200) { // 注意这里是 ===，不是 =
				Details.value = Res.data

			}
		} catch (error) {
			console.error('获取直播列表失败:', error)
			uni.showToast({
				title: '加载直播列表失败',
				icon: 'none'
			})
		}
	}


	const handleBack = () => {
		uni.navigateBack();
	};
	const handledetails = (val) => {
		uni.navigateTo({
			url: `/pages/talents/position`
		});
	};
	const handleResume = () => {
		uni.navigateTo({
			url: `/pages/resume/index`
		});
	}
	const toggleCollection = async (item) => {
		try {
			const res = await saveCollection({
				type: 5, // 5代表投融资类型
				collection_id: item.finance_id // 使用金融产品的ID
			})

			if (res.code === 200) {
				// 更新当前项的收藏状态
				item.is_collection = item.is_collection == 0 ? 1 : 0
				uni.showToast({
					title: item.is_collection ? '收藏成功' : '已取消收藏',
					icon: 'none'
				})
				getinstitutionDetails()
			} else {
				throw new Error(res.message || '操作失败')
			}
		} catch (error) {
			console.error('收藏操作失败:', error)
			uni.showToast({
				title: error.message,
				icon: 'none'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		min-height: 100vh;
		position: relative;

		.content {
			padding-top: var(--status-bar-height);
			padding-top: calc(var(--status-bar-height) + 70rpx);
			/* 导航栏高度 */
			display: flex;
			flex-direction: column;

			// align-items: center;
			// justify-content: center;
			// background: #ffffff;

			.head {
				width: 100rpx;
				height: 100rpx;
			}

			.item-container {
				display: flex;
				flex-wrap: wrap;
				gap: 20rpx;

				.item {
					padding: 12rpx 25rpx;
					background: #F6F6F6;
					border-radius: 6rpx;
				}
			}

			.tilte {
				position: relative;

				.tliteimg {
					width: 75rpx;
					height: 15.37rpx;
					position: absolute;
					bottom: -8rpx;
				}
			}

			.list {
				.item {
					width: 100%;
					height: 300rpx;
					background: #FFFFFF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					border: 1rpx solid;
					border-image: linear-gradient(61deg, rgba(57, 141, 251, 0), rgba(255, 255, 255, 1)) 1 1;

					.tips {
						height: 44rpx;
						background: rgba(57, 141, 251, 0.1);
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #398DFB;
						line-height: 44rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}
				}
			}
		}
	}
</style>